<template>
	<HeaderNav active-index="1"></HeaderNav>
	
	
	
	<TaskContainer>
	  <div style="margin-top: 20px;flex: 1 1 auto;">
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column prop="id" label="序号"  width="60"/>
			 <el-table-column prop="name" label="学生名" width="120"/>
			 <el-table-column prop="email" label="邮箱" width="240"/>
			 <el-table-column prop="task_total_count" label="任务总数" width="90"/>
			 <el-table-column prop="task_count_1" label="未开始数量" width="100"/>
			 <el-table-column prop="task_count_2" label="未检查数量" width="100"/>
			 <el-table-column prop="task_count_3" label="未检查数量" width="100"/>
			 <el-table-column prop="task_ncount" label="不会做" width="90"/>
			 <el-table-column prop="task_rate" label="完成率" width="90">
				 <template #default="scope">
					 <div style="display: flex; align-items: center">
					   <span style="margin-left: 10px">39%</span>
					 </div>
				 </template>
			 </el-table-column>
			 
			 <el-table-column fixed="right" label="操作">
			   <template #default="scope">
				 <el-button type="warning" size="small"  @click="handleApplyTask(scope.$index, scope.row)">分配任务</el-button>
				 <el-button type="info" size="small" @click="handleEdit(scope.$index, scope.row)">重置密码</el-button>
				 <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">禁用用户</el-button>
			   </template>
			 </el-table-column>
		</el-table>
		
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
			   :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div>
	  </div>
	 </TaskContainer>
</template>
	
	<script>
	import HeaderNav from "@/components/HeaderNav.vue"
	import TaskContainer from "@/components/TaskContainer.vue"
	import Condition from "@/components/Condition.vue"
	export default {
		components: {
			HeaderNav,
			TaskContainer, 
			Condition,
		},
		data() {
			return {
				pagination: {
					page: 1, 
					rows: 20, 
				},
				list: [
				  {
					id: 1,
				    email: 'zhangsan@sina.com', 
					name: '张三' ,
					task_total_count: 100,
					task_count_1 : 30,
					task_count_2 : 50,
				  },
				  {
				  	id: 2,
				    email: 'lisi@sina.com',
				    name: '李四',
					task_total_count: 100,
					task_count_1 : 30,
					task_count_2 : 50,
				  },
				],
				
			}
		},
		methods: {
			handleAdd(event) {
				this.$layer.open({
					type: 2,
					title: '添加模块',
					shadeClose: true,
					shade: 0.5,
					area: ['650px', '280px'],
					btn: ['保存', '关闭'] ,
					content: '/module/add',
					yes: (index, layero) => {
						layer.close(index);
					}
				})
			},
			batchRemove(event) {
				let rows = this.$refs.tb.getSelectionRows();
				console.log(rows);
			},
			handleApplyTask(index, row) {
				this.$layer.open({
					type: 2,
					title: '分配任务 - ' + row.name,
					shadeClose: true,
					shade: 0.5,
					area: ['1300px', '820px'],
					btn: ['保存', '关闭'] ,
					content: '/group/task-list',
					yes: (index, layero) => {
						layer.close(index);
					}
				})
			}
		}
	}
	</script>
	
	<style scoped>
	.table-modules {
		padding: 10px 20px;
	}
	.table-modules span {
		padding: 2px 10px;
		margin: 0 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	
	.toolbar {
		position: relative;
		right: 10px;
		z-index: 200;
		text-align: right;
		margin: 20px;
		flex: 1 1 auto;
	}
	</style>